<ion-header>
  <ion-navbar>
    <ion-title>{{"homeTitle" | translate}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  <audio *ngIf="playAudio" loop="loop" autoplay="autoplay">
    <source src="../../assets/sound/alarm01.wav" type="audio/mpeg">
  </audio>
  <ion-row>
    <ion-col>
    </ion-col>
    <ion-col>

      <ion-card (click)="toggleMute()">
        <ion-icon class="scorebg" name="radio-button-off"></ion-icon>
        <div class="card-title">{{'sleepQuality' | translate}}:</div>
<!--         <div class="card-subtitle">{{sleepDisplay}}{{'sleepUnit' | translate}} {{sleepAdjustment |
          translate}}&nbsp;&nbsp;</div> -->
          <div class="card-almicon">
          <ion-icon *ngIf="!mute" class="almicon" name="notifications"></ion-icon>
          <ion-icon *ngIf="mute" class="almicon" name="notifications-off"></ion-icon>
        </div>


      </ion-card>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>
  <ion-grid>
    <ion-row>
      <ion-col>
        <img *ngIf="getAwayAlarm(person)" width="60" style="background-color: red" src="../../assets/imgs/leave.png" />
        <img *ngIf="getUpAlarm(person)" width="60" style="background-color: red" src="../../assets/imgs/up.png" />
        <img *ngIf="getSideAlarm(person)" width="60" style="background-color: red" src="../../assets/imgs/side.png" />
        <img *ngIf="getAwayAlarmFlag(person)" width="60" src="../../assets/imgs/leave.png" />
        <img *ngIf="getUpAlarmFlag(person)" width="60" src="../../assets/imgs/up.png" />
        <img *ngIf="getSideAlarmFlag(person)" width="60" src="../../assets/imgs/side.png" />
        <img *ngIf="!(getSideAlarmFlag(person) || getAwayAlarmFlag(person) || getUpAlarmFlag(person) || getSideAlarm(person) || getAwayAlarm(person) || getUpAlarm(person))"
          width="60" src="../../assets/imgs/sleep.png" />
      </ion-col>
      <ion-col (click)="nav2alarmRec('AWAY')">
        <ion-label class="value">{{getBedAlarmString(person)}}</ion-label>
      </ion-col>
      <ion-col>
        <img width="60" src="../../assets/imgs/move.png" />
      </ion-col>
      <ion-col (click)="nav2alarmRec('MOVE')">
        <ion-label class="value">{{moveTotal}} {{'moveUnit' | translate}}</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img *ngIf="getHeartAlarm(person)" width="60" style="background-color: red" width="60" src="../../assets/imgs/heart.png" />
        <img *ngIf="!getHeartAlarm(person)" width="60" width="60" src="../../assets/imgs/heart.png" />
      </ion-col>
      <ion-col>
        <ion-label class="value">{{heart}} {{'heartUnit' | translate}}</ion-label>
      </ion-col>
      <ion-col>
        <img *ngIf="getBreatheAlarm(person)" width="60" style="background-color: red" width="60" src="../../assets/imgs/breath.png" />
        <img *ngIf="!getBreatheAlarm(person)" width="60" width="60" src="../../assets/imgs/breath.png" />
      </ion-col>
      <ion-col>
        <ion-label class="value">{{breathe}} {{'heartUnit' | translate}}</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img *ngIf="getHeartAlarm(person)" width="60" style="background-color: red" width="60" src="../../assets/imgs/pressure.png" />
        <img *ngIf="!getHeartAlarm(person)" width="60" width="60" src="../../assets/imgs/pressure.png" />
      </ion-col>
      <ion-col>
        <ion-label class="value">{{pressureH}} {{'pressureUnit' | translate}}</ion-label>
        <ion-label class="value">{{pressureL}} {{'pressureUnit' | translate}}</ion-label>
      </ion-col>
      <ion-col>
        <img *ngIf="getBreatheAlarm(person)" width="60" style="background-color: red" width="60" src="../../assets/imgs/sugar.png" />
        <img *ngIf="!getBreatheAlarm(person)" width="60" width="60" src="../../assets/imgs/sugar.png" />
      </ion-col>
      <ion-col>
        <ion-label class="value">5.7 {{'sugarUnit' | translate}}</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img width="60" *ngIf="getRingAlarm(person)" style="background-color: red" src="../../assets/imgs/ring4help.png" />
        <img width="60" *ngIf="!getRingAlarm(person)" src="../../assets/imgs/ring4help.png" />
      </ion-col>
      <ion-col (click)="nav2alarmRec('RING')">
        <ion-label class="value">{{getRingAlarmString(person)}}</ion-label>
      </ion-col>
      <ion-col>
        <img width="60" *ngIf="getTurnOverReminderString(person)" style="background-color: red" src="../../assets/imgs/turnOver.png" />
        <img width="60" *ngIf="!getTurnOverReminderString(person)" src="../../assets/imgs/turnOver.png" />
      </ion-col>
      <ion-col>
        <ion-label class="value">{{getTurnOverReminderString(person)}}</ion-label>
      </ion-col>
    </ion-row>
    <!-- <ion-row>
      <ion-col>
        <img width="60" *ngIf="getWetAlarm(person)" style="background-color: red" src="../../assets/imgs/wet.png" />
        <img width="60" *ngIf="!getWetAlarm(person)" src="../../assets/imgs/dry.png" />
      </ion-col>
      <ion-col (click)="nav2alarmRec('WET')">
        <ion-label class="value">{{getWetString(person)}}</ion-label>
      </ion-col>
      <ion-col></ion-col>
      <ion-col></ion-col>
    </ion-row> -->
    <ion-row>
      <ion-col>
      </ion-col>
      <ion-col class="value">{{'sleepSummary' | translate}}
      </ion-col>
      <ion-col>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div class="value">{{"deepSleep" | translate}}</div>
      </ion-col>
      <ion-col>
        <div class="value">{{"shallowSleep" | translate}}</div>
      </ion-col>
      <ion-col>
        <div class="value">{{"totalSleep" | translate}}</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <!-- <div class="value">{{deepSleep}}h</div> -->
        <div class="value">--</div>
      </ion-col>
      <ion-col>
        <!-- <div class="value">{{shallowSleep}}h</div> -->
        <div class="value">--</div>
      </ion-col>
      <ion-col>
        <!-- <div class="value">{{totalSleep}}h</div> -->
        <div class="value">--</div>
      </ion-col>
    </ion-row>
    <ion-row>
    </ion-row>
  </ion-grid>

</ion-content>
